<template>
  <div class="base-profile-setting">
    <h2>Profile Settings</h2>
    <el-form ref="form" :model="form" status-icon :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="学校" prop="school">
        <el-input v-model="form.school"></el-input>
      </el-form-item>
      <el-form-item label="年级" prop="grade">
        <el-input v-model="form.grade"></el-input>
      </el-form-item>
      <!--      <el-form-item label="what'up" prop="whatUp">-->
      <!--        <el-input v-model="form.whatUp"></el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label='sex' prop="sex">-->
      <!--        <el-radio-group v-model="form.sex">-->
      <!--          <el-radio v-for="(sex, index) in SEX_SET" :key="index" :label="index">-->
      <!--            {{ sex }}-->
      <!--          </el-radio>-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-button @click="updateProfile" type="primary">save all</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {SEX_TYPE} from '@/utils/constants'

import {updateBaseInfo} from "@/network/user";
import {mapState} from "vuex";

export default {

  name: "BaseProfileSetting",
  mounted() {
    this.form.name = this.userInfo.name;
    this.form.school = this.userInfo.school;
    this.form.grade = this.userInfo.grade;
  },
  data() {
    const checkFormat = (rule, value, callback) => {
      if (!value) {
        return callback()
      } else if (value.length > 18 || value.length < 2) {
        return callback(new Error('Input must be between 2 and 18 in length'))
      } else {
        return callback()
      }
    }
    return {
      SEX_SET: SEX_TYPE.SEX_SET,
      form: {
        name: '',
        school: '',
        grade: '',
        whatUp: '',
        sex: null
      },
      rules: {
        name: [
          {validator: checkFormat, trigger: 'blur'}
        ],
        school: [
          {validator: checkFormat, trigger: 'blur'}
        ],
        grade: [
          {validator: checkFormat, trigger: 'blur'}
        ]
      }
    }
  },
  computed: {
    ...mapState(
        ['userInfo']
    )
  },
  methods: {
    updateProfile: function () {
      if (!(this.form.name || this.form.school || this.form.grade)) {
        this.$message.warning('At last one option is needed')
        return
      }
      let newInfo = this.userInfo;
      newInfo.name = this.form.name;
      newInfo.school = this.form.school;
      newInfo.grade = this.form.grade;
      updateBaseInfo(newInfo).then(_ => {
        console.log(_)
        this.$message.success("Profile update success")
        this.getProfile()
      }).catch(_ => {
        console.log(_);
      })
    }
  }
}
</script>

<style scoped>


</style>